import React from 'react';
import {connect} from 'dva/index';
import {Button, Form, Input, Modal} from 'antd';

const R = require('ramda');
const FormItem = Form.Item;

const airCompanyDetail = Form.create()(class AirCompanyDetail extends React.Component {
	constructor(props) {
		super(props);
		this.state = { 
            open: false, 
            disabled: false 
        }
	}

	handleOpen = (disabled) => {
		this.setState({ open: true, disabled });
	}

	handleCancel = () => {
		this.setState({ open: false });
		this.props.form.resetFields();
	}

	handleSave = () => {
		this.props.form.validateFields({ force: true }, (errors, values) => {
			if (errors) return;
			values.id = this.props.airCompany.dataSource && this.props.airCompany.dataSource.id ? this.props.airCompany.dataSource.id : null;
			if (!R.equals(R.pick(Object.keys(values), this.props.airCompany.dataSource), values)) {
				this.props.dispatch({
					type: values.id ? 'airCompany/updateAirCompany' : 'airCompany/addAirCompany',
					payload: {
						...values,
						onSuccess: () => {
							this.handleCancel();
							if (this.props.refreshList) this.props.refreshList();
						}
					}
				})
			} else this.handleCancel();
		})
	}

	render() {
		let dataSource = this.props.airCompany.dataSource ? this.props.airCompany.dataSource : {};
		let formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
		const { getFieldDecorator } = this.props.form;
		let footer = [
			<Button key="save" size="large" loading={this.props.loading} onClick={this.handleSave.bind(this)} style={{ display: this.state.disabled ? 'none' : 'inline-block' }}>保存</Button>,
			<Button key="cancel" size="large" loading={this.props.loading} onClick={this.handleCancel.bind(this, true)}>{this.state.disabled ? "关闭" : "取消"}</Button>
		];
		return (
			<Modal maskClosable={false} visible={this.state.open} title={'航空公司详情'} onCancel={this.handleCancel.bind(this)} footer={footer} confirmLoading={this.props.loading}>
				<Form>
					<FormItem {...formItemLayout} label="航空公司代码" hasFeedback>
						{getFieldDecorator('aviationCode', {
							rules: [{
								required: true, message: '请输入航空公司代码',
							}],
							initialValue: dataSource.aviationCode
						})(
							<Input maxLength="20" disabled={this.state.disabled}/>
							)}
					</FormItem>
					<FormItem {...formItemLayout} label="航空公司中文名称" hasFeedback>
						{getFieldDecorator('aviationName', {
							rules: [{
								required: true, message: '请输入航空公司中文名称',
							}],
							initialValue: dataSource.aviationName
						})(
							<Input maxLength="10" disabled={this.state.disabled}/>
							)}
					</FormItem>
					<FormItem {...formItemLayout} label="航空公司英文名称" hasFeedback>
						{getFieldDecorator('aviationNameEn', {
							rules: [{
								required: true, message: '请输入航空公司英文名称',
							}],
							initialValue: dataSource.aviationNameEn
						})(
							<Input maxLength="20" disabled={this.state.disabled}/>
							)}
					</FormItem>
				</Form>
			</Modal>
		)
	}
})

function mapStateToProps(state) {
	return {
		loading: state.loading.models.airCompany, airCompany: state.airCompany
	};
}

export default connect(mapStateToProps)(airCompanyDetail);